<template>
	<view class="pb130 o-h myIndex">
		<!-- #ifndef H5 -->
		<!-- 	<uni-nav-bar v-if="layout.pageSetting[0].styles.modulePage==1" id='uninavbar' uropcity="1" :isleft="false" :fixed='true'
		 :ispr='true' :statusBar="true" :border='false' :bg='layout.pageSetting[0].styles.colorBg' :color="layout.pageSetting[0].styles.colorWord"
		 :title="layout.pageSetting[0].styles.navTitle">
			<view class="header-t" :style="{color:opcity>=1?'#000':'#fff'}" slot='left'>个人中心</view>
		</uni-nav-bar> -->
		<!-- 	<uni-nav-bar v-else id='uninavbar' :isleft="false" :uropcity="opcity" :fixed='true' :ispr='false' :statusBar="true"
		 :border="opcity>=1" :title="layout.pageSetting[0].styles.navTitle">
		</uni-nav-bar> -->
		<!-- #endif -->
		<!-- 关注条 -->

		<block v-for="(v, i) in layout.attention" :key="i">
			<atten-tion :co="v.styles" v-if="v.name == 'attention' && v.styles.status==1"></atten-tion>
		</block>

		<!-- 搜索框 -->
		<block v-for="(v, i) in layout.list" :key="i">
			<!-- vip -->
			<members-vip :styles="v.styles" :showpr='layout.pageSetting[0].styles.modulePage'
				v-if="v.name == 'vip'"></members-vip>
			<!-- 推荐功能 -->
			<tj-tools v-else-if="v.name=='btn2' && v.styles.title!='会员等级'" :co="v.styles"></tj-tools>


		</block>
		<!-- 会员等级 -->
		<block>
			<view class="vipbox">
				<view class="title">
					会员等级
				</view>
				<view class="vipcard">
					VIP.1巧人粉丝
				</view>
				<view class="dengji">
					<view class="label">
						<view class="left">
							再积累5个成长值升级VIP2 >
						</view>
						<view class="righy">
							VIP.4
						</view>
					</view>
					<view class="process">
						 <view class="jindu" style="width: 5%;background: #303030;">
							 
						 	
						 </view>

					</view>

				</view>

			</view>
		</block>

		<!-- 悬浮设置 -->
		<block v-if="layout.susBtn&&layout.susBtn[0]">
			<sus-btn :co="layout.susBtn[0].styles"></sus-btn>
		</block>


		<!-- 下单提示 -->
		<block v-if="layout.remind&&layout.remind[0]">
			<order-prompt :co="layout.remind[0].styles"></order-prompt>
		</block>
		<footc></footc>
		<tab-bar></tab-bar>
		<load v-if="showloading"></load>
	</view>
</template>

<script>
	import uniNavBar from "@/components/third/uni-nav-bar.vue"
	import searchBox from '@/components/drag/search.vue';
	import noticeSue from '@/components/drag/notice.vue';
	import picLunboBy from '@/components/drag/picLunbo.vue';
	import btnGroup from '@/components/drag/btn.vue';
	import pictures from '@/components/drag/pictures.vue';
	import titlesBar from '@/components/drag/titles.vue';
	import blank from '@/components/drag/blank.vue';
	import linesWire from '@/components/drag/lines.vue';
	import bookText from '@/components/common/functionCmp/rich-text.vue';
	import cardTab from '@/components/drag/card.vue';
	import hotSpots from '@/components/drag/hot.vue';
	import margicCube from '@/components/drag/margic.vue';
	import susBtn from '@/components/drag/susBtn.vue';
	import attenTion from '@/components/drag/attenTion.vue';
	import orderPrompt from '@/components/drag/remind.vue';
	import openList from '@/components/drag/open.vue';
	import membersVip from '@/components/drag/vip.vue';
	import listNav from '@/components/drag/listNav.vue';
	import tjTools from '@/components/drag/tj-tools.vue'
	import load from '@/components/common/load.vue'
	import footc from '@/components/common/footc.vue'
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'mine',
		components: {
			uniNavBar,
			searchBox,
			noticeSue,
			picLunboBy,
			btnGroup,
			pictures,
			titlesBar,
			blank,
			linesWire,
			bookText,
			cardTab,
			hotSpots,
			margicCube,
			susBtn,
			attenTion,
			orderPrompt,
			openList,
			membersVip,
			listNav,
			tjTools,
			load,
			footc,
		},
		data() {
			return {
				showloading: true,
				opcity: 0,
			};
		},

		onLoad(options) {
			this.getSystem();
			this.getLoginInfo({
				inviteId: options.userId
			});
			this.getLayout({
				page: 'personalcenter',
				id: '2'
			}).then(() => {
				this.showloading = false
				console.log("this.layout", this.layout);
				// #ifdef H5
				this.util.setNT(this.layout.pageSetting[0].styles.navTitle || '个人中心')
				// #endif
			});
			this.getConfig({
				key: 'vipset',
				api: 'config',
				params: {
					ident: 'vipSet'
				}
			})
			this.getLayout()
		},
		onShow() {
			if (this.uId) {
				this.refreshUser({
					nomask: 1,
					get: 1,
					now: 1,
				})
			}
		},
		computed: {
			...mapState({
				layout: state => state.layout.personalcenter.body || {},
			})
		},

		methods: {
			...mapActions(['getConfig']),
			onClick() {
				this.$emit('click');
			}
		},
		onPageScroll(e) {
			if (this.opcity >= 1 && e.scrollTop / 64 >= 1) {
				return;
			}
			let o = e.scrollTop / 64
			this.opcity = o;
		},
	};
</script>
<style scoped lang="scss">
	.myIndex {
		height: 100vh;
		background: linear-gradient(0deg, #FFFFFF 0%, #FFEEE0 100%);
	}

	.vipbox {
		box-sizing: border-box;
		padding: 17rpx 52rpx;
		width: 95%;
		background:#FFFFFF ;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.04);
		margin-left: 20rpx;
		margin-top: 30rpx;
		.title{
			font-weight: normal;
			font-size: 30rpx;
			color: #000000;
			font-weight: 600;
			text-align: center;	
			margin-bottom: 14rpx;
		}
		.vipcard{
			width: 151rpx;
			height: 37rpx;
			background: #303030;
			text-align: center;
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
			margin-bottom: 32rpx;
			
		}
		.dengji{
			width: 100%;
			.label{
				font-size: 20rpx;
				display: flex;
				justify-content: space-between;
			}
		}
		.process{
			width: 100%;
			height: 13rpx;
		    background: #C6C6C6;
			margin-top: 20rpx;
			position: relative;
			.jindu{
				height: 13rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
	}
</style>